<template>
  <van-skeleton title avatar :row="3" :loading="props.loading" v-for="user in props.userList">
    <van-card
        :desc="user.profile"
        :title="`${user.username}`"
        :thumb="user.avatarUrl"
    >
      <template #tags>
        <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px; margin-top: 8px">
          {{ tag }}
        </van-tag>
      </template>
      <template #footer>
        <van-icon name="like-o" color="red" size="1.3em" class="like"/>
        <van-button size="mini" color="#46a3ff" @click="onCardClick(user.id)">查看用户详情</van-button>
      </template>
    </van-card>
  </van-skeleton>
</template>

<script setup lang="ts">
import {UserType} from "../models/user";
import myAxios from "../plugins/myAxios";
import {Toast} from "vant";
import {useRouter} from "vue-router";
const router = useRouter();
interface UserCardListProps {
  loading: boolean;
  userList: UserType[];
}

const props = withDefaults(defineProps<UserCardListProps>(), {
  loading: true,
  // @ts-ignore
  userList: [] as UserType[],
});

const onCardClick = async (id: number) => {
  try{
    await router.push({
      path: '/friend/info',
      query: {
        id: id
      }
    })
  } catch (error){
    console.error('获取用户数据时出错:', error);
  }
};
</script>

<style scoped>
.like{
margin-right: 5px;
  margin-bottom: 10px;
}
</style>
